<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RAX</title>
    <link rel="stylesheet" type="text/css" href="//unpkg.com/normalize.css@5.0.0" />
    <style>

    body {
      margin: 0;
      font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
      font-weight: 300;
    }

    svg * {
      fill: none;
      stroke: currentColor;
    }

    #svg-logo {
      stroke-width: 2;
      color: #F9F9F9;
      padding: 40px;
    }

    #svg-logo:hover {
      color: #f76927;
    }

    nav {
      width: 100%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      background-color: rgba(0, 0, 0, 0.4);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
    }

    code {
      display: inline-block;
      border: 1px solid #ccc;
      margin: 6px 0;
      padding: 6px 12px;
      border-radius: 6px;
    }

    .site-nav {
      margin: 0 auto;
    }

    .site-nav {
      width: 1190px;
      position: relative;
      display: flex;
    }

    .site-title {
      color: #4a4a4a;
      font-size: 36px;
      line-height: 36px;
      margin: 0;
      padding: 36px 0;
      font-weight: 300;
    }

    .site-logo {
      text-decoration: none;
    }

    .site-logo-icon {
      position: absolute;
      width: 30px;
      height: 26px;
      top: 12px;
    }

    .site-logo-title {
      position: absolute;
      font-size: 16px;
      line-height: 50px;
      color: white;
      left: 36px;
      font-weight: 300;
    }

    .site-nav-links {
      margin-left: 100px;
      display: inline-block;
    }

    .site-nav-links > a {
      text-decoration: none;
      color: #dddddd;
      line-height: 50px;
      font-size: 16px;
      font-weight: 300;
      position: relative;
      display: inline-block;
    }

    .site-nav-links > a:hover {
      color: #f76927;
    }

    .site-nav-links > a:not(:last-child)::after {
      left: calc(100% + 0.5em);
    }

    .site-nav-links > a:not(:last-child) {
      margin: 0 1em 0 0;
    }

    .site-nav-links > a.current {
      color: #504f55;
    }

    .site-hero {
      padding: 50px 0;
      text-align: center;
      position: relative;
    }

    .site-bg-video {
      position: absolute;;
      z-index: -1;
      top: 0;
      left: 0;
      background-color: #000;
      width: 100%;
      min-width: 1160px;
    }

    .site-hero-desc {
      color: #F9F9F9;
      margin: 0;
      padding: 24px 0;
      font-size: 36px;
      font-weight: 300;
    }

    .site-btns {
      text-align: center;
      padding: 20px;
    }

    .button {
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      border-radius: 5px;
      width: 120px;
      margin: 1em;
      padding: 1em 2em;
      border: 1px solid;
      background: none;
      color: inherit;
      vertical-align: middle;
      position: relative;
      z-index: 1;
      -webkit-backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      color: #F9F9F9;
      border-color: #F9F9F9;
      overflow: hidden;
      -webkit-transition: border-color 0.3s, color 0.3s;
      transition: border-color 0.3s, color 0.3s;
      -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
      transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }

    .button::before {
    	content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 150%;
    	height: 100%;
    	background: #f76927;
    	z-index: -1;
    	-webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    	transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    	-webkit-transform-origin: 0% 100%;
    	transform-origin: 0% 100%;
    	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
    	transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
    }

    .button:hover {
    	color: #F9F9F9;
    	border-color: #f76927;
    }

    .button:hover::before {
    	opacity: 1;
    	background-color: #f76927;
    	-webkit-transform: rotate3d(0, 0, 1, 0deg);
    	transform: rotate3d(0, 0, 1, 0deg);
    	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }

    .site-examples {
      text-align: center;
      margin: 0 auto;
      background: #f9f9f9;
      padding-bottom: 36px;
    }

    .site-example {
      width: 900px;
      height: 500px;
    }

    .site-quickstart {
      text-align: center;
      background: #f5f5f5;
      padding-bottom: 36px;
    }

    .site-quickstart-content {
      text-align: left;
      margin: 0 auto;
      width: 900px;
    }

    .site-showcase {
      text-align: center;
      background: #f9f9f9;
      padding-bottom: 36px;
    }

    .site-showcase-app {
      margin: 0 50px;
      width: 100px;
    }

    .site-logos {
      text-align: center;
      background: #f9f9f9;
      padding: 60px;
    }

    .footer { background: #000000; font-size: 12px; line-height: 1.5; color: #f9f9f9; text-align: center; padding: 25px 0;}
    .footer .links>li { margin-top: 8px }
    .footer .links { display: inline-block }
    .footer .links>li { display: inline-block; padding: 0 5px }
    .footer .links .muted { padding: 0 }
    .footer ul,.footer ol { margin: 0; padding: 0; list-style: none; list-style-image: none }
    .footer a { color: #f9f9f9; text-decoration: none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif }
    .footer a:hover,.footer a:focus { color: #f9f9f9; text-decoration: underline }
    </style>
  </head>
<body>

  <nav>
    <div class="site-nav">
      <a class="site-logo" href="/">
        <img class="site-logo-icon" src="https://gw.alicdn.com/L1/461/1/40137b64ab73a123e78d8246cd81c8379358c999_200x200.jpg">
        <span class="site-logo-title">RAX</span>
      </a>
      <div class="site-nav-links">
        <a href="https://github.com/alibaba/rax/tree/master/docs">Docs</a>
        <a href="./playground">Playground</a>
        <a href="https://github.com/alibaba/rax">Github</a>
      </div>
    </div>
  </nav>

  <div class="site-hero">
    <video class="site-bg-video" autoplay loop muted>
      <source src="./bg.mp4" type="video/mp4">
    </video>

    <svg id="svg-logo" width="181px" height="180px" viewBox="0 0 502 500">
      <path d="M1.921875,1.74918424 L124.246094,126.431507 L325.703125,124.945093 C325.703125,124.945093 370.699219,128.423852 370.699219,183.746706 C370.699219,239.069559 332.53125,243.050326 332.53125,243.050326 L249.359375,245.281909 L363.339844,364.446066 C363.339844,364.446066 499.003906,333.666698 499.003906,184.213416 C499.003906,34.7601343 344.476562,0.451022841 344.476562,0.451022841 L1.921875,1.74918424 Z"></path>
      <polygon points="0.733326549 246.301613 175.226563 246.301613 423.578125 496.136891 247.136719 499.564665"></polygon>
    </svg>

    <h3 class="site-hero-desc">A universal React-compatible render engine.</h3>

    <div class="site-btns">
      <a class="button" href="https://github.com/alibaba/rax/tree/master/docs">Get Started</a>
      <a class="button" href="#examples">Examples</a>
    </div>

  </div>

  <div class="site-examples" id="examples">
    <h3 class="site-title">Examples</h3>
    <iframe class="site-example" frameborder="0" src="./playground/index.html?theme=default"></iframe>
  </div>

  <div class="site-quickstart">
    <h3 class="site-title">Quick Start</h3>
    <div class="site-quickstart-content">
      <p>
        1. Install the RAX CLI tool:
      </p>
      <code>
        npm install -g rax-cli
      </code>
      <p>
        2. Use the RAX CLI tool to create a new project:
      </p>
      <code>
        rax init YOUR_PROJECT_NAME
      </code>
      <p>3. Change directory to your new project directory and use the start command to initialize your local development server:</p>
      <code>
         npm start
      </code>
    </div>
  </div>

  <div class="site-showcase">
    <h3 class="site-title">Who's using RAX?</h3>
    <img class="site-showcase-app" alt="Taobao" src="https://cloud.githubusercontent.com/assets/677114/21566605/6d345216-cedf-11e6-8c4e-ae2522fd6e33.png">
    <img class="site-showcase-app" alt="QianNiu" src="https://cloud.githubusercontent.com/assets/677114/21566603/6953102e-cedf-11e6-959e-372df2ea00e6.png">
  </div>

  <!-- <div class="site-logos">
    <a href="https://alibaba.github.io/weex/">
      <img alt="Weex Inside" src="https://cloud.githubusercontent.com/assets/677114/21266275/575eabee-c3e0-11e6-92d2-ad57e99372f2.png" width="200">
    </a>
  </div> -->

  <footer class="footer">
    <ul class="links">
      <li>&#169;&nbsp;2017&nbsp;&nbsp;<a href="http://taobaofed.org/" target="_blank">Taobao FED</a></li>
    </ul>
  </footer>
  <script src="https://unpkg.com/vivus@0.4.0/dist/vivus.min.js"></script>
  <script>
    (function() {
      var logo = new Vivus('svg-logo', {
        type: 'async',
        duration: 120,
      });
      logo.play();
    })();
  </script>
</body>
</html>
